<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scale=1.0" name="viewport">
    <title>dream</title>
    <link href="img/doraemon.ico" rel="icon">
    <link href="out/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
    <link href="out/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/normal.css" rel="stylesheet">
    <link href="css/header.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="out/bootstrap4/js/jquery-3.6.1.min.js"></script>
    <script src="out/bootstrap4/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--header-->
<header>
    <div class="myNav container-fluid">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-sm navbar-dark">
                    <!-- Brand -->
                    <a class="navbar-brand d-flex" href="#"><img src="img/doraemon_logo.png" style="width: 3rem">
                        <span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 2rem;">哆啦A梦</span></a>
                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse"
                            type="button">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <!-- Navbar links -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav w-100 justify-content-center align-items-end align-items-sm-center">
                            <li class="nav-item">
                                <a class="nav-link p-1 active" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="websit/recommend.html">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="websit/special.html">专题</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="websit/film.html">剧场版</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="websit/play.html">视频</a>
                            </li>
                            <li class="nav-item">
                                <a class="d-block d-sm-none border login p-1 rounded nav-link" href="websit/login.html">注册/登录</a>
                            </li>
                        </ul>
                    </div>
                    <a class="d-none d-sm-block border p-1 rounded nav-link login" href="websit/login.html">注册/登录</a>
                </nav>
            </div>
        </div>
    </div>
</header>
<!--banner-->
<div class="mySlide container-fluid">
    <div class="row">
        <div class="col-12 p-0 m-0">
            <div class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel"
                 id="carouselExampleIndicators">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
                    <li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
                    <li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="w-100 d-block" src="img/doraemo_bg_2.jpg">
                    </div>
                    <div class="carousel-item">
                        <img alt="img" class="d-block w-100" src="img/doraemo_bg_3.jpg">
                    </div>
                    <div class="carousel-item">
                        <img alt="img" class="d-block w-100" src="img/doraemo_bg_4.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--content-->
<div class="myContent container">
    <div class="row p-5">
        <div class="col-12 justify-content-center d-flex"><span class="font-weight-bold">版块分类</span></div>
        <div class="mt-3 mb-3 col-12 justify-content-center d-flex"><span
                class="font-weight-bold text-primary">——</span></div>
        <div class="col-12">
            <div class="row justify-content-center">
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0 ">
                    <a class="nav-link d-flex flex-column align-items-center" href="#">
                        <i class="fa fa-film d-block" style="font-size: 2rem"></i>动漫
                    </a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0"><a class="nav-link d-flex flex-column align-items-center"
                                                                href="#"><i
                        class="fa fa-bar-chart-o d-block"
                        style="font-size: 2rem"></i>榜单</a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0"><a class="nav-link d-flex flex-column align-items-center"
                                                                href="websit/film.html"><i
                        class="fa fa-play-circle-o d-block"
                        style="font-size: 2rem"></i>剧场版</a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0"><a class="nav-link d-flex flex-column align-items-center"
                                                                href="#"><i
                        class="fa fa-bookmark-o d-block"
                        style="font-size: 2rem"></i>收藏</a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0"><a class="nav-link d-flex flex-column align-items-center"
                                                                href="#"><i
                        class="fa fa-twitch d-block"
                        style="font-size: 2rem"></i>影评</a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
                <div class="col-lg-2 col-md-4 col-6 p-1 m-0"><a class="nav-link d-flex flex-column align-items-center"
                                                                href="#"><i
                        class="fa fa-cubes d-block"
                        style="font-size: 2rem"></i>更多</a>
                    <div class="lineTop"></div>
                    <div class="lineRight"></div>
                    <div class="lineBottom"></div>
                    <div class="lineLeft"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row bg-light p-5">
        <div class="col-lg-12 justify-content-center d-flex"><span class="font-weight-bold">哆啦A梦</span></div>
        <div class="mt-3 mb-3 col-lg-12 justify-content-center d-flex"><span
                class="font-weight-bold text-primary">——</span></div>
        <div class="col-lg-12 p-4">
            <div class="row d-flex align-items-center">
                <div class="col-lg-4 col-md-12"><img alt="..." class="img-fluid" src="img/doraemo_bg_1.jpg"></div>
                <div class="col-lg-8 col-md-12 bg-white pt-3 pb-3">
                    <div style="font-size: 1rem">
                        <p class="small" style="letter-spacing: 1px;line-height: 1rem">
                            漫画叙述了一只来自22世纪的猫型机器人——哆啦A梦，受主人野比世修的托付，回到20世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和妈妈野比玉子、身边的小伙伴静香、胖虎、小夫发生的轻松幽默搞笑感人的故事。
                            漫画自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，仍有新作在不断推出。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer-->
<footer class="m-0 p-0">
    <div class="container-fluid bg-dark p-3">
        <div class="row">
            <div class="col-12 col-lg-4 offset-lg-0 col-md-5 offset-md-0 col-sm-5 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-start">
            <img alt="..."
                     src="img/doraemon_logo.png"
                     style="width: 2rem">
                <span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 1.5rem;">哆啦A梦</span>
            </div>
            <div class="col-12 col-lg-4 offset-lg-4 col-md-5 offset-md-2 col-sm-7 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-end">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-twitter bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-weibo bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-wechat bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<script src="js/normal.js"></script>
</body>
</html>